<template>
  <div>
    <div>
      <van-nav-bar title="快递单" left-arrow @click-left="$router.go(-1)">
      </van-nav-bar>
    </div>
    <!-- 搜索框 -->
    <form action="/">
      <van-search
        v-model="searchvalue"
        show-action
        action-text="搜索"
        shape="round"
        placeholder="快递单号"
        @search="onSearch"
      />
    </form>
    <div class="title" v-for="item in StarListData" :key="item.id">
      <van-cell :title="'快递单号：' + item.orderCode" is-link to="" />
      <div>
        <van-row>
          <van-col span="8">
            <img src="../assets/img/暂无消息.png" alt="" width="100%" />
          </van-col>
          <van-col span="16">
            <div>
              <span>下单时间：</span>
              <span>{{ item.createTime }}</span>
            </div>
            <div>
              <span>发货人：</span>
              <span>{{ item.consignor }}</span>
            </div>
            <div>
              <span>收货人：</span>
              <span>{{ item.consignee }}</span>
            </div>
          </van-col>
        </van-row>
        <div class="btn">
          <van-button
            round
            type="info"
            :text="item.star == 0 ? '评价' : '查看评价'"
            @click="goEvalua(item.id, item.star, item.info)"
          ></van-button>
        </div>
      </div>
    </div>
    <!--  分页 -->
    <van-pagination
      v-model="currentPage"
      :total-items="24"
      :show-page-size="0"
      @change="changePage"
    />
  </div>
</template>

<script>
import { GetStarListData } from "@/request/api";
export default {
  data() {
    return {
      loading: true,
      StarListData: [],
      //   status: "评价",
      searchvalue: "",
      star: 0,
      currentPage: 1,
    };
  },
  created() {
    // 发送请求渲染数据
    GetStarListData({
      current: this.currentPage,
      size: "20",
      keyword: this.searchvalue,
    }).then((res) => {
      console.log(res);
      this.StarListData = res.data.records;
    });
  },
  methods: {
    goEvalua(val, star, info) {
      this.$router.push({
        path: "/evaluation",
        query: { id: val, star: star, info: info },
      });
    },
    onSearch() {
      GetStarListData({
        current: this.currentPage,
        size: "20",
        keyword: this.searchvalue,
      }).then((res) => {
        console.log(res);
        this.StarListData = res.data.records;
      });
    },
    changePage() {
      GetStarListData({
        current: this.currentPage,
        size: "20",
        keyword: this.searchvalue,
      }).then((res) => {
        console.log(res);
        this.StarListData = res.data.records;
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.van-nav-bar {
  background-color: rgb(6, 6, 139);
  /deep/.van-nav-bar__title,
  /deep/.van-icon {
    color: #fff;
  }
}
.van-search {
  .van-search__action {
    color: blue;
  }
}
.title {
  background-color: #fff;
  margin: 10px 0;
  /* padding: 0.5rem; */
  .van-cell {
    border-bottom: 1px solid #ccc;
  }
  .van-cell__title {
    text-align: left;
    font-size: 16px;
  }
}
.van-row {
  padding: 10px;
  border-bottom: solid 1px #ccc;
}
.btn {
  text-align: right;
  padding: 10px;
  .van-button {
    background-color: orange;
    border: orange;
    height: 35px;
    width: 90px;
  }
}
</style>